<template>
  <div>
      <div class="body">
          <h2>注册</h2>
          <form>
              <input type="text" placeholder="用户名" class="txt" v-model="user">
              <input type="password" placeholder="密码" class="txt" v-model="pwd">
              <input type="password" placeholder="确认密码" class="txt" v-model="pwd2">
              <input type="button" value="注册" @click="register" class="btn">
              <p>已经有账号了？<span @click="gologin">登录</span></p>
          </form>
      </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
    export default {
        data(){
            return {
                user: '',//用户名
                pwd: '',//密码
                pwd2: '',//确认密码
            }
        },
        methods: {
            register(){
                //点击注册按钮
                //判断密码和确认密码是否相同
                if(this.user&&this.pwd&&this.pwd2){
                    if(this.pwd == this.pwd2){
                        Toast('可以注册')
                    }else{
                        Toast('请重新确认密码')
                    }
                }else{
                    Toast('请填充完整')
                }
                
            },
            gologin(){
                //点击登录按钮，跳转到登录页面
                this.$router.push('Login')
            }
        }
    }
</script>

<style scoped lang="scss"> 
    div {
        padding: 0;
        margin: 0;
        position: fixed;
        width: 100%;
        height: 700px;
        background-image: url('../../static/timg4.jpg');
        .body {
            width: 80%;
            height: 60%;
            box-shadow: 0 3px 3px rgb(6,25,65);
            left: 50%;
            transform: translateX(-50%);
            top: 70px;
            background-color: rgb(118, 138, 209);
            border-radius: 10px;
            h2 {
                color: skyblue;
                text-align: center;
                line-height: 40px
            }
            form {
                width: 80%;
                height: 60%;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                margin-top: 20px;
                .txt {
                    opacity: 0.3;
                    color: purple;
                    padding: 0;
                    margin: 0
                }
                .btn {
                    width:60%;
                    border-radius: 30px;
                    color: purple;
                    left: 50%;
                    transform: translateX(-50%);
                    margin-top: 20px;
                    outline: none
                }
                p {
                    text-align: center;
                    margin-top: 10px;
                    span {
                        color: green
                    }
                }
            }
        }
    }
</style>

